---
import { getCollection } from 'astro:content';
import Layout from '@layouts/Layout.astro';
import GiscusComments from '@components/GiscusComments.astro';
import type { CollectionEntry } from 'astro:content';

export async function getStaticPaths() {
  const posts = await getCollection('blog');
  return posts.map((post) => ({
    params: { slug: post.slug },
    props: { post },
  }));
}

type Props = {
  post: CollectionEntry<'blog'>;
};

const { post } = Astro.props;
const { Content } = await post.render();
---

<Layout title={post.data.title}>
  <article class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
    <header class="mb-8">
      <div class="flex items-center space-x-2 text-gray-500 dark:text-gray-400 mb-4">
        <time datetime={post.data.date.toISOString()}>
          {new Date(post.data.date).toLocaleDateString('zh-CN', {
            year: 'numeric',
            month: 'long',
            day: 'numeric'
          })}
        </time>
        {post.data.category && (
          <>
            <span>·</span>
            <span>{post.data.category}</span>
          </>
        )}
      </div>
      <h1 class="text-4xl font-bold text-gray-900 dark:text-white mb-4">{post.data.title}</h1>
      {post.data.description && (
        <p class="text-xl text-gray-500 dark:text-gray-400">{post.data.description}</p>
      )}
      {post.data.author && (
        <p class="mt-4 text-gray-500 dark:text-gray-400">作者：{post.data.author}</p>
      )}
    </header>
    
    <div class="prose prose-lg max-w-none dark:prose-invert">
      <Content />
    </div>

    <div class="mt-16 pt-8 border-t border-gray-200 dark:border-gray-800">
      <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-8">评论</h2>
      <GiscusComments mapping={post.slug} />
    </div>
  </article>
</Layout>

<style>
  /* 代码块样式 */
  :global(.prose pre) {
    padding: 1.5rem;
    border-radius: 0.5rem;
    overflow-x: auto;
  }

  :global(.prose code) {
    background-color: rgba(0, 0, 0, 0.1);
    padding: 0.2em 0.4em;
    border-radius: 0.25rem;
    font-size: 0.875em;
  }

  :global(.dark .prose code) {
    background-color: rgba(255, 255, 255, 0.1);
  }

  /* 链接样式 */
  :global(.prose a) {
    text-decoration: none;
  }

  :global(.prose a:hover) {
    text-decoration: underline;
  }
</style> 